<template>
  <div class="baseInfo">
    <div class="topIcon flex flex-end">
      <img src="@/assets/img/profile/topIcon1.png">
      <span>亲情号</span>
      <img src="@/assets/img/profile/topIcon2.png">
      <img src="@/assets/img/profile/topIcon3.png">
      <img src="@/assets/img/profile/topIcon4.png">
    </div>
    <div class="personal flex">
<!--      <img :src=baseInfo.avatar>-->
      <van-image :src=baseInfo.avatar>
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <div class="flex flex-column flex-evenly">
        <p class="name">{{ baseInfo.name }}</p>
        <p class="tbAccount">淘宝账号：{{ baseInfo.tbName }}</p>
      </div>
    </div>
    <div class="personalData flex flex-around">
      <div class="singleItem textAlignCenter"
           v-for="(baseData,index) in baseInfo.baseData" :key="'baseData'+index"
           @click="onPersonalDataClick(baseData)">
        <p class="num">{{ baseData.num }}</p>
        <p class="text">{{ baseData.title }}</p>
      </div>
    </div>
    <div class="activity flex flex-wrap flex-around">
      <div class="singleItem flex flex-around"
           v-for="(activity,index) in baseInfo.activity" :key="'activity'+index"
           @click="onActivityClick(activity)">
        <div>
          <p class="title">{{ activity.title }}</p>
          <p class="des">{{ activity.des }}</p>
        </div>
        <!--        <img class="marginAuto0" :src=activity.img>-->
        <van-image width="1rem" height="1rem" fit="contain"
                   :src="activity.img" class="marginAuto0"

        />
      </div>
    </div>
    <div class="order">
      <div class="titleRow flex flex-between">
        <p class="title">我的订单</p>
        <div class="more flex" @click="checkAllOrder">
          <div>查看全部订单</div>
          <van-icon class="arrow marginAuto0" name="arrow"/>
        </div>
      </div>
      <van-divider />
      <div class="main flex flex-evenly">
        <div class="singleItem textAlignCenter" v-for="(order,index) in baseInfo.order" :key="'order'+index"
             @click="onOrderClick(order)">
<!--          <van-badge>-->
<!--            <van-image width=".7rem" height=".7rem" fit="contain"-->
<!--                       class="margin0Auto" :src="order.img"-->
<!--            />-->
<!--          </van-badge>-->
          <badge>
            <van-image slot="badgeItem" width=".7rem" height=".7rem" fit="contain"
                       class="margin0Auto" :src="order.img"
            />
          </badge>

          <p>{{ order.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../style/baseInfo.less"
import Badge from "@/components/badge";
import Vue from 'vue';
import {Image as VanImage,Lazyload,Loading} from 'vant';
import {Toast} from 'vant';
import {Icon,Divider} from 'vant';

Vue.use(Loading);
Vue.use(Lazyload);
Vue.use(Divider);
Vue.use(Icon);
Vue.use(Toast);
Vue.use(VanImage);
export default {
  name: "baseInfo",
  components: {Badge},
  props: {
    baseInfo: {
      type: Object
    }
  },
  methods: {
    onPersonalDataClick(baseData) {
      Toast(baseData.title)
    },
    onActivityClick(activity) {
      Toast(activity.title)
    },
    onOrderClick(order) {
      Toast(order.title)
    },
    checkAllOrder() {
      Toast("查看所有订单")
    }
  }
}
</script>

<style lang="less" scoped>
.van-divider{
  margin: 0;
}
/deep/ .van-badge{
  line-height: .35rem;
  top: .05rem;
  font-weight: 550;
  background-color: #fff;
  color: #FF7700;
  min-width: .5rem;
  border:.05rem solid #FF7700;
}
</style>